<template>
  <div>
    <el-row type="flex" justify="center">
      <el-input v-model="numberString" size="mini"></el-input>
      <el-button type="primary" size="mini" @click="onSubmit">开始排序</el-button>
    </el-row>
    <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      canContinueSorting: true,
      myChart: null,
      times: 0,
      currentIndex: 0,
      numberString: '7,6,5,4,3,2,3',
      data: [],
      option: {
        xAxis: {
          type: 'category',
          data: [],
          animationDuration: 0,
          animationDurationUpdate: 400,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // realtimeSort: true,
          data: [{
            value: undefined,
            itemStyle: {
              color: '#6e7074'
            }
          }],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }],
        animationDuration: 0,
        animationDurationUpdate: 400
      }
    }
  },
  components: {},
  watch: {},
  computed: {},
  created() {

  },
  mounted() {
    this.initialEcharts()
  },
  methods: {
    onSubmit() {
      this.canContinueSorting = false
      setTimeout(() => {
        this.resetData()
        this.dealWithInput()
        this.setOption()
        this.canContinueSorting = true
        this.loop()
      }, 400)
    },
    resetData() {
      this.option.xAxis.data = []
      this.option.series[0].data = []
      this.data = []
      this.currentIndex = 0
      this.times = 0
    },
    setOption() {
      this.option.xAxis.data = []
      for (let i = 0; i < this.data.length; i++) {
        this.option.xAxis.data.push(i)
      }
      this.option.series[0].data = this.data
    },
    dealWithInput() {
      let numbers = this.numberString.split(',').map(x => parseInt(x)).filter(m => this.isRealNum(m))
      this.data = numbers.map(x => {
        return {
          value: x, itemStyle: {
            color: '#6e7074'
          }
        }
      })
    },
    loop() {
      // 普通为灰色'#6e7074'，
      // 当前的key(即每轮开始时最初的数，以times代表)为红色'#c23531'，
      // 选择过程中的为浅蓝色'#61a0a8',
      // 选择结束后最小项为深蓝色'#2f4554'。
      let min = this.data[this.times].value
      let minIndex = this.times
      let outLoop = () => {
        if (this.canContinueSorting) {

          // console.log(this.times)
          if (this.times >= this.data.length) {
            return false
          }
          min = this.data[this.times].value
          minIndex = this.times
          this.currentIndex = this.times
          // console.log('进入内循环')
          innerLoop()
        }
      }
      let innerLoop = () => {
        if (this.canContinueSorting) {
          if (this.currentIndex >= this.data.length) {
            this.setColor(this.data.length - 1, '#6e7074')
            this.setColor(minIndex, '#2f4554')
            setTimeout(() => {
              this.swap(this.times, minIndex)
              this.setColor(minIndex, '#c23531')
              this.setColor(this.times, '#2f4554')
            }, 400)
            setTimeout(() => {
              this.setColor(minIndex, '#6e7074')
              this.setColor(this.times, '#2f4554')
              this.times++
              outLoop()
            }, 400)
            return false
          }
          this.setColor(this.currentIndex, '#61a0a8')
          this.setColor(this.times, '#c23531')
          if (this.data[this.currentIndex].value < min) {
            min = this.data[this.currentIndex].value
            minIndex = this.currentIndex
          }

          setTimeout(() => {
            this.setColor(this.currentIndex, '#6e7074')
            this.currentIndex++
            innerLoop()
          }, 800)
        }
      }

      outLoop()
    },
    setColor(index, color) {
      this.data[index].itemStyle.color = color
      this.option.series[0].data = this.data
      this.myChart.setOption(this.option)
    },
    swap(times, minIndex) {
      let t = this.data[times].value
      this.data[times].value = this.data[minIndex].value
      this.data[minIndex].value = t
    },
    isRealNum(value) {
      if (value === '' || value === null) {
        return false
      }
      return !isNaN(value) && typeof value === 'number'
    },
    initialEcharts() {
      var chartDom = document.getElementById('myChart');
      var myChart = this.$echarts.init(chartDom);
      this.myChart = myChart
      // this.option && this.myChart.setOption(this.option);
    }
  }

}
</script>
